<template>
  <div id="screenIndex">
    <div class="head">
      <img src="../assets/images/logo.png" alt="">
      <div class="text">
        河北科技师范海洋分析管理系统
      </div>
      <div class="time">
        {{ currentTime }}
      </div>
    </div>
    <Amap />
    <!-- </dv-full-screen-container> -->
  </div>
</template>

<script>
import Amap from '@/components/Amap'
import moment from 'moment'
import 'moment/locale/zh-cn'
export default {
  components: {
    Amap
  },
  data() {
    return {
      timer: null,
      currentTime: ''
    }
  },
  created() {
    this.updateTime()
    // 设置定时器每秒更新时间
    this.timer = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    updateTime() {
      this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
</style>
<style lang="scss" scoped>
#screenIndex {
  width: 100%;
  height: 100vh;

  .head {
    height: 71px;
    background: url('../assets/images/bg.png') no-repeat left top;
    background-size: 100% 100%;
    position: relative;
    img{
     height: 60px;
    }
    .text {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      line-height: 71px;
      font-size: 24px;
      font-weight: bold;
      background-image: linear-gradient(to bottom, #01e9fe, #04a8fc);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 30%, rgba(255, 255, 255, .5));
      font-family: Helvetica Neue,
        Helvetica,
        PingFang SC,
        Hiragino Sans GB,
        Microsoft YaHei,
        \5fae\8f6f\96c5\9ed1,
        Arial,
        sans-serif;
    }
    .time {
      position: absolute;
      right: 1%;
      top: 50%;
      transform: translateY(-50%);
      font-size: 22px;
      color: #fff;
    }

  }
}
</style>
